import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';

import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";

class AfterSaleItem extends Component {

    cancelOrder = (orderItem) => {
        this.props.router.push({
            pathname: '/applyAfterSale',
            state: {
                orderItem,
                type: 1 // type 1代表取消订单
            }
        })
//  Modal.alert('提示', '是否取消订单', [
//    { text: '取消' },
//    {
//      text: '确定',
//      onPress: () => {
//        orderApi.cancleorder({
//          ordersn: orderItem.orderSn
//        }).then(result => {
//          if (result.result == 1) {
//            // 取消成功
//            if (this.props.cancelOrder) {
//              this.props.cancelOrder();
//            }
//          }
//        })
//      }
//    },
//  ]);
    }

    gotoApply = (dataItem, goods) => {
        this.props.router.push({
            pathname: '/applyAfterSale',
            state: {
                orderItem: dataItem,
                goodsItem: goods,
                type: 2 // type 2代表申请售后
            }
        })
    }

    gotoOrderDetail = (goods) => {
        this.props.router.push('/orderDetail/' + goods.orderId)
    }

    render() {
        const { dataItem } = this.props;
        const value = dataItem;
        let orderStatus = '';
        let showCancelBtn = false;
        let showApplyBtn = false;

        switch (dataItem.orderState) {
            case 20:
                orderStatus = '等待发货'
                showCancelBtn = true;
                break;
//    case 30:
//      orderStatus = '已发货'
//      showApplyBtn = true;
//      break;
            case 40:
                orderStatus = '已完成'
                showApplyBtn = true;
                break;
        }

        return <div className='orderitem'>
            {value.orderState==40 || value.orderState==30?
                (
                    <div  style={{marginBottom:".2rem",backgroundColor:"#fff"}}>
                        <WingBlank>
                            <Flex style={{backgroundColor:"#fff",padding:".2rem 0"}} align="start" justify="between">
                                <div>
                                    <div>订单编号 : {value.orderSn}</div>
                                    <div style={{marginTop:".2rem"}}>下单时间 : {value.createTimeStr}</div>
                                </div>
                                <span style={{color:"#ff0036"}}>{
                                    value.orderState==40?"已完成":"待收货"
                                }</span>
                            </Flex>
                        </WingBlank>
                        <WingBlank >
                            {value.orderGoodsEntityList.map((item,i)=>{
                                if(value.orderGoodsEntityList.length>1){
                                    return <NoLazyImg src={item.goodsImage} style={{width:"1.5rem",height:"1.5rem",marginRight:".2rem",padding:".2rem"}}  key={i} onClick={()=>{
                                        console.log(value, "value");
                                        this.props.dispatch(routerRedux.push({
                                            pathname: `/orderDetail/${value.orderId}`,
                                        }));
                                    }}/>
                                }else{
                                    return <Flex justify="between" key={i} onClick={()=>{
                                        console.log(value, "value");
                                        this.props.dispatch(routerRedux.push({
                                            pathname: `/orderDetail/${value.orderId}`,
                                        }));
                                    }}>
                                        <Flex style={{width: '90%'}}>
                                            <div style={{width:"2rem",height:"2rem",marginRight:".2rem"}}>
                                                <NoLazyImg src={item.goodsImage} style={{width:"2rem",height:"2rem"}}/>
                                            </div>

                                            <div>
                                                <p style={{lineHeight:".4rem"}}>{item.goodsName}</p>
                                                <p style={{color:"#999"}}>数量 : x{value.goodsNum}</p>
                                            </div>
                                        </Flex>
                                        <Icon style={{width:".3rem",height:".3rem"}} type="right" />
                                    </Flex>
                                }
                            })}
                        </WingBlank>
                        <Flex style={{backgroundColor:"#fff",padding:".2rem 0"}} justify="end">
                            <WingBlank>
                                {/* <div style={{padding:".1rem .15rem", color:"#ff0036",border:"1px solid #ff0036",borderRadius:"45px"}} onClick={()=>{
                    this.props.dispatch(routerRedux.push({
                        pathname:`/applyAfterSale/${value.orderId}`
                    }))
                }}>申请售后</div> */}
                                {
                                    value.barterState ? value.returnState ? <div style={{padding:".1rem .15rem", color:"#ff0036",border:"1px solid #ff0036",borderRadius:".45rem"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/returnDetail/${[value.returnId,1]}`
                                        }))
                                    }}>退货详情</div> : <div style={{padding:".1rem .15rem", color:"#ff0036",border:"1px solid #ff0036",borderRadius:".45rem"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/returnDetail/${[value.barterId,0]}`
                                        }))
                                    }}>换货详情</div> : <div style={{padding:".1rem .15rem", color:"#ff0036",border:"1px solid #ff0036",borderRadius:".45rem"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/EvaluateAndAfter/${dataItem.orderId}/${1}`
                                        }))
                                    }}>申请售后</div>
                                }
                            </WingBlank>
                        </Flex>
                    </div>
                ):""
            }
        </div>
    }
}

export default connect(({ orderList }) => ({ orderList }))(AfterSaleItem);
